<div class="bg-white dark:bg-gray-800 rounded-lg shadow-sm border border-gray-200 dark:border-gray-700">
  <div class="p-6">
    <div class="flex justify-between items-center mb-6">
      <h2 class="text-xl font-semibold text-gray-800 dark:text-white">人员列表</h2>
      <button 
        type="button" 
        {{on "click" this.showAddModal}}
        class="flex items-center px-4 py-2 bg-blue-600 text-white rounded-lg hover:bg-blue-700 focus:outline-none focus:ring-2 focus:ring-blue-500"
      >
        <T::Icon @icon="add" class="mr-2" />
        新增人员
      </button>
    </div>

    <div class="grid grid-cols-1 md:grid-cols-3 gap-6">
      {{#each this.groupedMembers as |group|}}
        <div class="bg-gray-50 dark:bg-gray-700 rounded-lg p-4">
          <h3 class="text-lg font-semibold mb-4 text-gray-800 dark:text-white flex items-center">
            <span class="w-3 h-3 rounded-full mr-2 {{this.getTypeColor group.type}}"></span>
            {{group.type}} ({{group.members.length}})
          </h3>
          <div class="space-y-2">
            {{#each group.members as |member|}}
              <div class="flex items-center justify-between p-3 bg-white dark:bg-gray-600 rounded-lg hover:bg-gray-100 dark:hover:bg-gray-500">
                <div>
                  <span class="font-medium text-gray-900 dark:text-white">{{member.name}}</span>
                </div>
                <div class="flex space-x-2">
                  <button
                    type="button"
                    {{on "click" (fn this.editMember member)}}
                    class="text-blue-600 hover:text-blue-900 dark:text-blue-400 dark:hover:text-blue-300"
                  >
                    <T::Icon @icon="edit" />
                  </button>
                  <button
                    type="button"
                    {{on "click" (fn this.deleteMember member.id)}}
                    class="text-red-600 hover:text-red-900 dark:text-red-400 dark:hover:text-red-300"
                  >
                    <T::Icon @icon="delete" />
                  </button>
                </div>
              </div>
            {{/each}}
          </div>
        </div>
      {{/each}}
    </div>

    {{#if this.showModal}}
      <div class="fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center z-50">
        <div class="bg-white dark:bg-gray-800 rounded-lg p-6 w-full max-w-md">
          <h3 class="text-lg font-semibold mb-4 text-gray-900 dark:text-white">
            {{if this.editingMember "编辑人员" "新增人员"}}
          </h3>
          
          <form {{on "submit" this.saveMember}}>
            <div class="space-y-4">
              <T::Input 
                @key="姓名" 
                @value={{this.formData.name}} 
                @required={{true}}
                {{on "input" (fn this.updateFormData "name")}}
              />
              
              <div class="pt-2">
                <label for="type-select" class="block">类型</label>
                <select 
                  id="type-select"
                  value={{this.formData.type}}
                  {{on "change" (fn this.updateFormData "type")}}
                  class="block mt-2 w-full rounded-lg border border-gray-200 bg-white px-4 py-2.5 text-gray-700 focus:outline-none focus:ring focus:ring-blue-300 dark:bg-gray-900 dark:border-gray-600 dark:text-gray-300"
                >
                  <option value="前端">前端</option>
                  <option value="后端">后端</option>
                  <option value="测试">测试</option>
                </select>
              </div>
            </div>
            
            <div class="flex justify-end space-x-3 mt-6">
              <button
                type="button"
                {{on "click" this.hideModal}}
                class="px-4 py-2 text-gray-600 bg-gray-200 rounded-lg hover:bg-gray-300 dark:text-gray-400 dark:bg-gray-700 dark:hover:bg-gray-600"
              >
                取消
              </button>
              <button
                type="submit"
                class="px-4 py-2 bg-blue-600 text-white rounded-lg hover:bg-blue-700"
              >
                {{if this.editingMember "保存" "创建"}}
              </button>
            </div>
          </form>
        </div>
      </div>
    {{/if}}
  </div>
</div>